<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="">
    <style>
        .container{
            height: 300px;
            background-color: royalblue;
        }
        .item{height:260px;}
        .item:nth-child(1){background-color: royalblue;}
        .item:nth-child(2){background-color: green;}
        .item:nth-child(3){background-color: blueviolet;}
        .item:nth-child(4){background-color: yellow;}
    </style>
</head>

<body>

    <!-- grid.less  @gutter:@grid-gutter-width  30px
        .container{
            .container-fixed();
            
            @media (min-width: @screen-sm-min) {
                width: @container-sm;
            }
            @media (min-width: @screen-md-min) {
                width: @container-md;
            }
            @media (min-width: @screen-lg-min) {
                width: @container-lg;
            }
        }

        .container-fixed(@gutter: @grid-gutter-width) {
            margin-right: auto;
            margin-left: auto;
            padding-left:  floor((@gutter / 2));
            padding-right: ceil((@gutter / 2));
            &:extend(.clearfix all);
        }


        宽度居中:  768  992  1200
        .container{
             margin-right: auto;
             margin-left: auto;
             padding-left: 15px;
             padding-right: 15px;
             @meida (min-width:  768px) {
                 width: 750px
             }
            @meida (min-width:  992px) {
                 width: 970
             }
              @meida (min-width:  1200px) {
                 width: 1170
             }
        }
        



     -->
     <!-- pc 4个模块  pad 2个模块  手机1个模块
     总和12个模块
     pc:  .col-md-3   >992        4个模块   25%
     pad: .col-sm-6   768 - 992   2个模块   50%
     手机 .col-xs-12  <768        1个模块   100%

    
    
    -->
    <div class="container-fluid">
        <div class="row">
            <div class="item col-md-3 col-sm-6 col-xs-12"></div>
            <div class="item col-md-3 col-sm-6 col-xs-12"></div>
            <div class="item col-md-3 col-sm-6 col-xs-12"></div>
            <div class="item col-md-3 col-sm-6 col-xs-12"></div>
        </div>
    </div>
</body>

</html>